<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>Hello MUI</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" href="../css/mui.min.css">
		<link href="../css/icons-extra.css" rel="stylesheet" />
		<link href="../css/waves.min.css" rel="stylesheet" />
		<style>
			html,
			body {
				background-color: #efeff4;
			}
			
			.title {
				padding: 20px 15px 10px;
				color: #6d6d72;
				font-size: 15px;
				background-color: #fff;
			}
			
			.item {
				background: #FFFFFF;
				border-bottom: 1px solid rgb(200, 200, 200);
			}
			
			.box {
				display: inline-block;
			}
			
			.waves-effect {
				display: block;
			}
			
			.box-right {
				margin-top: 2.5px;
				width: 100px;
				float: right;
			}
			
			.box-right img {
				height: 80px;
				width: 80px;
				margin: 10px;
			}
			
			.box-left {
				width: calc(100% - 100px);
				height: 105px;
				position: relative;
				padding-left: 10px;
			}
			
			.box-left .title {
				position: absolute;
				height: 80px;
				overflow: hidden;
			}
			
			.box-left .date {
				position: absolute;
				bottom: 0;
				font-size: 12px;
				padding-left: 15px;
				color: #a1a1a5;
			}
			
			.record {
				height: 100px;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title"><i class="mui-icon mui-icon-videocam"></i> 观看记录</h1>
		</header>
		<div class="mui-content" id="app">
			<div id="pullrefresh" class="mui-content mui-scroll-wrapper">
				<div class="mui-scroll">
					<div v-for="item in list" class="item waves-effect" @tap="play(item)">
						<div class="box box-left">
							<div class="title" v-html="item.title"></div>
							<div class="date" v-html="formatDate(item.watchTime)"></div>
						</div>
						<div class="box box-right">
							<img :src="'../' + item.picture" />

						</div>
					</div>
				</div>
			</div>
		</div>
		<script src="../js/mui.min.js"></script>
		<script src="../js/jQuery.js"></script>
		<script src="../js/common.js"></script>
		<script src="../js/vue.min.js"></script>
		<script src="../js/waves.js"></script>
		<script>
			Waves.init();
			mui.init({
				swipeBack: false,
				pullRefresh: {
					container: '#pullrefresh',
					up: {
						contentrefresh: '正在加载...',
						callback: pullupRefresh
					}
				}
			});
			var count = 0;
			/**
			 * 上拉加载具体业务实现
			 */
			function pullupRefresh() {
				if(window.vm.last) {
					mui.toast("已到最后!")
				} else {
					window.vm.page++;
					window.vm.getWatchHistorys();
				}

			}
			mui.plusReady(function() {

				var _back = mui.back;
				mui.back = function() {
					plus.navigator.setUserAgent("Mozilla/5.0 (Linux; Android 6.0; Nexus 5 Build/MRA58N) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/64.0.3282.167 Mobile Safari/537.36");
					if(window.embed && window.embed.isVisible()) {
						window.embed.close("slide-out-right")
					} else {
						_back();
					}
				}
				window.vm = new Vue({
					el: "#app",
					data: {
						page: 0,
						last: false,
						list: []
					},
					methods: {
						play: function(item) {
							user = getLoginUser();
							//查询会员权限
							postServer({
								url: requestUrl("/app/appUser/isExpire"),
								success: function(result) {
									if(result) {
										plus.navigator.setUserAgent('Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/63.0.3239.132 Safari/537.36')
										window.embed = plus.webview.create(requestUrl("/app/play?title=" + item.title + "&id=" + item.id + "&videoId=" + item.videoId + "&url=" + item.url), 'play-web-view', {
											additionalHttpHeaders: {
												"SESSION_APPUSER": JSON.stringify(user)
											},
											videoFullscreen: 'landscape-primary'
										});
										embed.show("slide-in-right");
									} else {
										alert(result.msg);
									}
								}
							})

						},
						formatDate: function(time) {
							return new Date(time).format("yyyy-MM-dd hh:mm:ss");
						},
						getWatchHistorys: function() {
							var that = this;
							postServer({
								url: requestUrl("/app/watchHistory/getWatchHistorys"),
								data: JSON.stringify({
									page: that.page
								}),
								success: function(result) {
									if(result.success) {
										that.last = result.result.last
										mui.each(result.result.content, function(i, e) {
											that.list.push(e);
										})
									} else {
										mui.toast(result.msg)
									}
								}
							})
						}
					}
				});
				window.vm.getWatchHistorys();
			})
		</script>
	</body>

</html>